<template>
  <!-- 话术管理 -->
  <div id>
    <div class="module-con">
      <div class="search-box">
        <el-form label-width="120px" size="mini">
          <el-row>
            <el-col :span="6">
              <el-form-item label="话术标题">
                <el-input v-model="searchData.verbalTitle"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="话术类型" >
                <el-select
                  v-model="searchData.type"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="clearfix">
              <div class="fr">
                <el-button
                  type="primary"
                  size="mini"
                  class="search-btn"
                  @click="search"
                >
                  查询
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  class="reset-btn"
                  @click="reset"
                >
                  重置
                </el-button>
                <el-button type="primary" size="mini" @click="add">
                  新增
                </el-button>
              </div>
            </el-col>
          </el-row>

          <!--<el-row class="t-mt10">
            <el-col :span="24" class="clearfix">
              <div class="fr">
                <el-button
                  type="primary"
                  size="mini"
                  class="search-btn"
                  @click="search"
                >
                  查询
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  class="reset-btn"
                  @click="reset"
                >
                  重置
                </el-button>
              </div>
            </el-col>
          </el-row>-->
        </el-form>
      </div>
    </div>

    <div class="table-content" style="margin-top: 20px">
      <el-table :data="tableData" border tooltip-effect="dark">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          :index="getRowIndex"
        ></el-table-column>
        <el-table-column
          prop="verbalTitle"
          align="center"
          label="话术标题"
        ></el-table-column>
        <el-table-column
          prop="type"
          align="center"
          label="话术类型"
          :formatter="transType"
        ></el-table-column>
        <!-- <el-table-column
        ></el-table-column> -->
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="createUserName"
          align="center"
          label="创建人"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="modify(scope.row)"
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-delete"
              @click="del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableQuery.page"
          :page-sizes="[5, 10, 15,20]"
          :page-size="tableQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div></div>
    <!-- 新增 -->
    <Add
      v-if="dialogVisible_add"
      :dialogVisible.sync="dialogVisible_add"
      @update="getList"
    ></Add>
    <!-- 编辑 -->
    <Modify
      v-if="dialogVisible_modify"
      :dialogVisible.sync="dialogVisible_modify"
      :row="row"
      @update="getList"
    ></Modify>
  </div>
</template>

<script >
import Add from "./components/Add";
import Modify from "./components/Modify";

export default {
  components: { Add, Modify },
  data() {
    return {
      content:"",
      searchData: {
        verbalTitle: "",
        createUserName: "",
        createStartTime: "",
        type: "",
      },
      // 页码初始化数据
      total: 0, //总条目数
      tableQuery: {
        limit: 10, //每页现实的条数
        page: 1, //当前显示那页
      },
      typeOptions: [
        {
          label: "首次回访",
          value: "1",
        },
        {
          label: "逾期催收",
          value: "0",
        },
      ],
      tableData: [
        {
          verbalContent: ""
        }
      ],
      dialogVisible_add: false, //新增
      dialogVisible_modify: false, //编辑

    };
  },
  methods: {
    transType(row, column, cellValue){
      let tt = this.typeOptions.find((ele) => (ele.value == cellValue));
      return tt ? tt.label:"";
    },
    //获取序号
    getRowIndex(index){
      index = index + 1 + (this.tableQuery.page-1) * this.tableQuery.limit;
      return index;
    },
    addRow(index, rows) {
      rows.splice(length + 1, 0, 1);
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //页码显示条目变化
    handleSizeChange(val) {
      // console.log(val)
      this.tableQuery.limit = val;
      this.tableQuery.page = 1;
      this.getList();
    },
    // 页码跳转
    handleCurrentChange(val) {
      // console.log(val)
      this.tableQuery.page = val;
      this.getList();
    },
    add() {
      this.dialogVisible_add = true;
    },
    modify(row) {
      this.row = row;
      this.dialogVisible_modify = true;
    },
    del(row) {
      this.$confirm("请确认是否删除话术?", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      }).then(() => {
        this.$http.delete("/IAM/MC/verbal/delete/" + row.verbalId).then((res) => {
          if (res.code == "200") {
            this.$message.success("删除成功");
            this.getList();
          }
        });
      });
    },

    getList() {
      const data = {
        size: this.tableQuery.limit,
        page: this.tableQuery.page-1,
        ...this.searchData,
      };
      this.$axios({
        method: "get",
        url: "/IAM/MC/verbal/showByCondition",
        params: data
      })
        .then((res) => {
          // console.log(res)
          let arr = res.data.content
          this.tableData = arr;
          this.total = res.data.totalElements;
          for(let key in arr) {
            let time = this.$moment(arr[key].createTime).format("YYYY-MM-DD")
            this.tableData[key].createTime = time
            this.content = arr[key].verbalContent

            let richText = this.content.replace(/<.+?>/g, '');

            this.tableData[key].verbalContentTxt = richText;

          }
          // console.log(this.content)
        });
    },
    search() {
      this.tableQuery.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        verbalTitle: "",
        createUserName: "",
        createStartTime: "",
      };
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
// .demo-table-expand {
// font-size: 0;
// }
// .demo-table-expand label {
// width: 90px;
// color: #99a9bf;
// }
// .demo-table-expand .el-form-item {
// margin-right: 0;
// margin-bottom: 0;
// width: 50%;
// }
.table-content {
  .el-pagination {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }
}
.pageBox {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
</style>

